import { Fragment, defineComponent, reactive } from 'vue';
import { detailsPage, detailsBox, infoBox, location, floor, header, headerWrap, content, right, title, bottom, detailsText, detailsWrap, detailsInfo, gotoWrap, gotoImg, gotoContent, close, bookingInfo, bookingWrap, bookingImg } from './Details.module.scss';
import { map, navi, poi } from '@/store';
import closeImg from '@/assets/img/details/close.png'
import peopleImg from '@/assets/img/details/people.png'
import booking from '@/assets/img/details/booking.png'
import defaultImg from '@/assets/img/default.png'
import control from '@/utils/control';
import MyLoading from '@/components/loading/Loading'
/*
---文件
*/

export const detailsObj = reactive({
    isShowInfo: false,
    isLoading: false,
    routeTips: '路径规划中请稍后',
})
export default defineComponent({
    name: 'Details',
    data() {
        return {
        };
    },
    methods: {
        showInfo() {
            map.detailsFlag = false;
            detailsObj.isShowInfo = true;
            control.removeControls();
        },
        toPath() {
            detailsObj.isShowInfo = map.detailsFlag = false;
            control.addControls();
            // 导航准备，导航准备，检验起点终点是否合格
            if (navi.verifyRoutePois()) {
                // showLoadingToast({
                //     message: '路线规划中',
                //     forbidClick: true,
                //     duration: 0,
                // });
                detailsObj.isLoading = true;
                //规划路线并显示
                navi.startRoute();
            }
        },
        backToMenu(type) {
            if (type == 1) {
                control.addControls();
                detailsObj.isShowInfo = false;
                map.detailsFlag = true;
            } else {
                if (map.initModel) {
                    map.initModel.resetColor();
                }
                poi.infoType = "details";
                map.menuFlag = true;
                map.searchFlag = false;
                map.detailsFlag = false;
            }
        }
    },
    render() {
        return <Fragment>
            <div class={detailsPage}>
                <div class={detailsBox} v-show={map.detailsFlag}>
                    <div class={headerWrap}>
                        <img class={header} src={poi.end.poiImgPc ? poi.end.poiImgPc : defaultImg} />
                        {poi.end.floorId-1 > 0 ? <span class={content}>{poi.end.floorId-1}F</span> : <span class={content}>MB</span>}
                    </div>
                    <div class={right}>
                        {poi.end?.bookInfo ? <span class={title}>{poi.end?.bookPlace.bookplacename}</span> : <span class={title}>{poi.end.poiName}</span>}
                        <div class={bottom}>
                            {poi.end?.bookInfo ? <div class={detailsText}>{poi.end?.bookInfo.title}</div> : null}
                            <div class={detailsWrap}>
                                <span class={detailsInfo} onClick={this.showInfo}>详 情</span>
                            </div>
                            <div class={gotoWrap} onClick={this.toPath}>
                                <img class={gotoImg} src={peopleImg} />
                                <span class={gotoContent}>去这里</span>
                            </div>
                        </div>
                    </div>

                    <img class={close} src={closeImg} onClick={() => this.backToMenu(0)} />
                </div>
                <div class={infoBox} v-show={detailsObj.isShowInfo}>
                    <span class={location}>位置详情</span>
                    <div class={headerWrap}>
                        <img class={header} src={poi.end.poiImgPc} />
                        {poi.end.floorId-1 > 0 ? <span class={floor}>{poi.end.floorId-1}F</span> : <span class={floor}>MB</span>}
                    </div>
                    <span class={title}>{poi.end?.poiName}</span>
                    <span class={content}>{poi.end?.poiDetail}</span>
                    <div class={bottom}>
                        {poi.end?.bookType == 1 && <div class={bookingWrap}>
                            <img class={bookingImg} src={booking} />
                            <span class={bookingInfo}>去预约</span>
                        </div>}
                        <div class={gotoWrap} style={{ width: '100%' }} onClick={this.toPath}>
                            <img class={gotoImg} src={peopleImg} />
                            <span class={gotoContent}>去这里</span>
                        </div>
                    </div>
                    <img class={close} src={closeImg} onClick={() => this.backToMenu(1)} />
                </div>
                {detailsObj.isLoading && <MyLoading msg={detailsObj.routeTips} loadColor="#fff" style={{ background: 'rgba(0,0,0,0.8)', height: '154px', borderRadius: '15px 15px 0 0' }} />}
            </div>
        </Fragment>;
    },
});